<script type="text/x-template" id="ai-media-list">
    <div>
        <cc-page-wrapper :page="page"
                         :search="searchForm"
                         @filter-change="handleFilterChange"
                         @filter-reset="handleFilterReset"
        >
            <div slot="search">
                <el-form-item style="display: inline-block" label="自增ID">
                    <el-input v-model="searchForm.id" clearable></el-input>
                </el-form-item>
                <el-form-item style="display: inline-block" label="视频ID">
                    <el-input v-model="searchForm.video_id" clearable></el-input>
                </el-form-item>
                <el-form-item style="display: inline-block" label="视频名称">
                    <el-input v-model="searchForm.video_name" clearable></el-input>
                </el-form-item>
            </div>
            <cc-card-list slot="content" class="img-list"
                          :data="tableData"
                          :selected="selected"
                          :selection-type="selectionType"
                          :select-on-row-click="true"
                          @row-selection-add="handleRowSelectionAdd"
                          @row-selection-remove="handleRowSelectionRemove">
                <div class="img-item" slot="row" slot-scope="{row: item}">
                    <img referrerpolicy="no-referrer" :key="item.static_cover_url" :src="item.static_cover_url"/>
                    <a class="img-preview" @click.stop="reviewPic(item)">预览</a>
                    <a class="img-rls-preview " @click.stop="reviewRlsPoster(item)">相关海报</a>
                    <div class="img-detail">
                        <span>自增id：{{ item.id }}</span>
                        <span>视频id：{{ item.video_id }}</span>
                        <span>视频名称: {{ item.video_name }}</span>
                    </div>
                    <div class="img-info">
                        <span class="img-title">{{ item.video_name }}</span>
                    </div>
                </div>
            </cc-card-list>

        </cc-page-wrapper>

        <el-dialog title="预览" :visible.sync="picDialogVisible" width="75%">
          <span class="pics">
            <img referrerpolicy="no-referrer" :src="reviewPicUrl" alt="图片" max-width="500">
          </span>
            <span class="pics">
            <img referrerpolicy="no-referrer" :src="reviewDynamicPicUrl" alt="动图" max-width="500">
          </span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="picDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="picDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

    <#--<el-dialog title="相关海报" :visible.sync="posterDialogVisible" width="1080px">-->
    <#--<el-carousel :interval="5000" width="100%" height="600px">-->
    <#--<el-carousel-item v-for="item in posterUrlList" :key="item">-->
    <#--<cc-poster-show :src="item"></cc-poster-show>-->
    <#--</el-carousel-item>-->
    <#--</el-carousel>-->
    <#--</el-dialog>-->
        <el-dialog title="相关海报" :visible.sync="posterDialogVisible" fullscreen :close="closeRlsPosterDialog">
        <#--<div class="demo-image__lazy poster-stream-preview">-->
        <#--<div class="rls-poster-item" v-for="(row, index) in posterInfoList"-->
        <#--:key="index">-->
        <#--<el-image referrer-policy="no-referrer" style="width: 566px; height: 566px" fit="cover"-->
        <#--:key="row.poster_url" :src="row.poster_url" lazy>-->
        <#--<div slot="error" class="image-slot">-->
        <#--<i class="el-icon-picture-outline"></i>-->
        <#--</div>-->
        <#--</el-image>-->
        <#--<div class="rls-poster-detail">-->
        <#--<span>自增id：{{ row.id }}</span>-->
        <#--<span>海报标签：{{ row.poster_label }}</span>-->
        <#--<span>海报分辨率: {{ row.poster_width + '*' + row.poster_height }}</span>-->
        <#--</div>-->
        <#--<div class="img-info">-->
        <#--<span class="img-title">{{ row.poster_name }}</span>-->
        <#--</div>-->
        <#--</div>-->
        <#--</div>-->
            <div class="header">
                <el-button type="primary" @click="selectLabelStart">
                    选择标签
                </el-button>
                <span>{{selectedLabel}}</span>
            </div>
            <ai-rls-poster-list :data="posterInfoList" class="rls-poster-list">
                <div class="rls-poster-item" slot="row" slot-scope="{row: item}">
                    <div class="demo-image__lazy poster-stream-preview">
                        <el-image :key="item.poster_url" :src="item.poster_url">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="rls-poster-detail">
                        <span>自增id：{{ item.id }}</span>
                        <span>海报标签：{{ item.poster_label }}</span>
                        <span>海报分辨率: {{ item.poster_width + '*' + item.poster_height }}</span>
                    </div>
                    <div class="img-info">
                        <span class="img-title">{{ item.poster_name }}</span>
                        <span class="img-resolution">{{ item.poster_width + '*' + item.poster_height }}</span>
                    </div>
                </div>
            </ai-rls-poster-list>
            <div class="footer">
                <span class="close-btn"> <el-button type="warning" @click="closeRlsPosterDialog">关闭</el-button></span>
            </div>
        </el-dialog>
        <el-dialog
                class="label-selector"
                title="选择标签"
                size="tiny"
                :visible.sync="showLabelSelector">
            <el-tag v-for="(label, index) in videoLabelList" :key="index" @click.native="handleSelectLabel(label)">
                {{ label }}
            </el-tag>
        </el-dialog>
    </div>
</script>

<script>
    Vue.component('ai-media-list', {
        template: '#ai-media-list',
        data: function () {
            return {
                selectedLabel: undefined,
                showLabelSelector: false,
                posterDialogVisible: false,
                videoLabelData: {},
                videoLabelList:[],
                posterUrlList: [],
                posterInfoList: [],
                searchForm: {},
                pagination: {},
                selected: [],
                selectionType: 'multiple',
                urls: {
                    //分页数据接口
                    pageList: '/v1/aiPoster/mediaPageList.html',
                    listRlsLabel: '/v1/aiPoster/listRlsLabel.html',
                    listRlsPoster: '/v1/aiPoster/listRlsPoster.html',
                },
                loading: true,
                picDialogVisible: false, // 预览图片弹出框
                reviewPicUrl: null,
                reviewDynamicPicUrl: null,
                tableLoading: false,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                tableData: [],
                currentId: undefined
            };
        },
        created: function () {

        },
        methods: {
            selectLabelStart() {
                if (this.currentId == undefined) {
                    this.$message('加载标签选择对话框异常')
                }
                this.loadRlsLabel(this.currentId)
                this.showLabelSelector = true
            },
            closeRlsPosterDialog() {
                this.currentId = undefined
                this.selectedLabel = undefined
                this.posterDialogVisible = false
            },

            handleSelectLabel(label) {
                this.selectedLabel = label
                this.loadRlsPoster(this.currentId, label)
                this.showLabelSelector = false
            },

            resetForm() {
                this.$refs.searchForm.resetFields();
                this.page.currentPage = 1
                this.page.pageSize = 10
            },
            reviewPic(row) {
                this.reviewPicUrl = row.static_cover_url
                this.reviewDynamicPicUrl = row.dynamic_cover_url
                this.picDialogVisible = true
            },
            reviewRlsPoster(row) {
                id = row.id
                this.currentId = id
                this.loadRlsPoster(id, this.selectedLabel)
                this.posterDialogVisible = true
            },
            loadRlsPoster(id, label) {
                this.ajax(this.urls.listRlsPoster, {id: id, poster_label: label}
                        , function (data) {
                            if (data.code === '0') {
                                this.posterInfoList = data.data
                            } else {
                                this.posterInfoList = []
                            }
                        }.bind(this));
            },
            loadRlsLabel(id) {
                this.ajax(this.urls.listRlsLabel, {id: id}
                        , function (data) {
                            if (data.code === '0') {
                                this.videoLabelList = data.data
                            } else {
                                this.$message(data.msg)
                            }
                        }.bind(this));
            },
            handleSearch: function (searchForm) {
                this.searchForm = searchForm;
                this.tableLoading = true;
                var searchParams = this.getSearchParams(searchForm);
                searchParams.page = this.page.currentPage;
                searchParams.rows = this.page.pageSize;
                this.ajax(this.urls.pageList, searchParams
                        , function (data) {
                            if (data.code === '0') {
                                this.tableData = data.data.rows
                                this.page.total = data.data.total
                                this.tableLoading = false
                            } else {
                                this.tableData = [];
                                this.tableLoading = false;
                            }
                        }.bind(this));
            },
            handleRefresh() {

            },
            handleRowSelectionAdd() {

            },
            handleRowSelectionRemove() {

            },

            handleSize(pageSize) {
                this.page.pageSize = pageSize;
                this.handleSearch(this.searchForm);
            },
            handlePageChange(currentPage) {
                this.page.currentPage = currentPage;
                this.handleSearch(this.searchForm);
            },
            handleRowClick(currentRow) {
//                        this.reviewPicUrl = currentRow.poster_url
//                        this.picDialogVisible = true
            },
            handleFilterChange(type, filter) {
                this.handleSearch(this.searchForm)
            },
            handleFilterReset() {
                this.searchForm = {}
                this.$set(this.page, 'currentPage', 1)
                this.$set(this.page, 'pageSize', 10)
            },
            loadPageData() {
                this.tableLoading = true;
                this.ajax(this.urls.pageList, {}, function (data) {
                    if (data.code === '0') {
                        this.tableData = data.data.rows
                        this.page.total = data.data.total
                        this.tableLoading = false

                    } else {
                        this.tableData = [];
                        this.tableLoading = false;
                    }
                }.bind(this));
            }
        }
        ,
        mounted: function () {
            this.loadPageData()
        }
    })
</script>

<style>
    .header {
        margin-left: 30px;
        margin-bottom: 20px;
    }

    .pics img {
        max-width: 500px;
        max-height: 500px;
    }

    .img-list {
        width: 1340px;
    }

    .img-list .img-item {
        position: relative;
        width: 255px;
        height: 255px;
        border: 1px solid #ccc;
        margin: 0 10px 10px 0;
    }

    .img-list .img-item img {
        max-width: 100%;
        max-height: 100%;
    }

    .img-list .img-item .img-detail {
        position: absolute;
        bottom: 20px;
        text-align: center;
        opacity: 0.8;
        background: #f5f5f5;
        width: 100%;
        display: none;
    }

    .rls-poster-list .rls-poster-item .rls-poster-detail {
        position: absolute;
        bottom: 20px;
        text-align: center;
        opacity: 0.8;
        background: #f5f5f5;
        width: 100%;
        display: none;
    }

    .rls-poster-list .rls-poster-item .rls-poster-detail span {
        display: block;
    }

    .rls-poster-list .rls-poster-item:hover .rls-poster-detail {
        display: block;
    }

    .img-list .img-item .img-detail span {
        display: block;
    }

    .img-list .img-item:hover .img-detail {
        display: block;
    }

    .img-info {
        position: absolute;
        bottom: 0;
        height: 20px;
        width: 100%;
        background: #000;
        color: #fff;
        opacity: 0.8;
    }

    .img-title {
        display: inline-block;
        overflow: hidden;
        width: 130px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .img-resolution {
        display: inline-block;
        overflow: hidden;
        width: 130px;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: right;
    }

    .img-list .img-item .img-preview {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        height: 20px;
        border: 1px solid #ccc;
        color: #444;
        background: #fff;
        padding: 0px 5px;
    }

    .img-list .img-item .img-rls-preview {
        position: absolute;
        top: 120px;
        right: 0;
        cursor: pointer;
        height: 20px;
        border: 1px solid #ccc;
        color: #444;
        background: #fff;
        padding: 0px 5px;
    }

    .poster-stream-preview {
        width: 100%;
        overflow: scroll;
    }

    .footer {
        margin-top: 20px;
    }

    .close-btn {
        margin-top: 10px;
        margin-left: 540px;
        margin-bottom: 30px;
    }
</style>